import { init } from "snabbdom/build/package/init";
import { h } from "snabbdom/build/package/h";

import { styleModule } from "snabbdom/build/package/modules/style";
import { eventListenersModule } from "snabbdom/build/package/modules/eventlisteners";
const patch = init([styleModule, eventListenersModule]);


let originData = Array.from(Array(30), (v, k) => k);

let data = originData
let vnode = document.querySelector("#app");

const handleClick = (type, item) => {
    switch (type) {
        case "reverse":
            data.reverse();
            break;
        case "odd":
            data = []
            originData.forEach((item) => {
                item % 2 && data.push(item);
            });
            break;
        case "even":
            data = []
            originData.map((item) => {
                !(item % 2) && data.push(item);
            });
            break;
        case "delete":
            data.splice(data.indexOf(item), 1)
            originData.splice(originData.indexOf(item), 1)
            console.log(data)
            break;

        case "add":

            originData.push(Math.ceil(Math.random() * 10000))
            data = [...originData]
            break;
        default:
            data = [...originData]
    }
    render();

};



function render() {
    console.log(data)
    vnode = patch(vnode, h("div", [
        h(
            "h1",
            "动画不会"
        ),
        h(
            "button", {
                on: {
                    click: () => {
                        handleClick("reverse");
                    },
                },
            },
            "反转"
        ),
        h(
            "button", {
                on: {
                    click: () => {
                        handleClick("odd");
                    },
                },
            },
            "奇数"
        ),
        h(
            "button", {
                on: {
                    click: () => {
                        handleClick("even");
                    },
                },
            },
            "偶数"
        ),
        h(
            "button", {
                on: {
                    click: () => {
                        handleClick("add");
                    },
                },
            },
            "添加"
        ),
        h(
            "ul",
            data.map((item) => h("li", [
                h('span', item),
                h('button', {
                    on: {
                        click: () => {
                            handleClick("delete", item);
                        },
                    },
                }, '删除')
            ]))
        ),
    ]));

}

render();